<template>
  <div class="design-model-page">
    <div class="btn">
      <el-button type="primary" size="small" @click="$router.back()">返 回</el-button>
      <el-button type="primary" size="small" @click="handleScreen">全 屏</el-button>
    </div>
    <main>
      <div class="bimface-container">
        <div class="content">
          <span class="tip" v-if="tip">{{ tip }}</span>
          <bim-face-pro ref="bim" :loaderOptions="loaderOptions"></bim-face-pro>
        </div>
      </div>
    </main>
  </div>
</template>

<script>
import BimFacePro from '@/components/bimface/project';

export default {
  components: {
    BimFacePro,
  },
  data() {
    return {
      loaderOptions: {},
      uploadVisible: false,
      btnLoading: false,
      el: null,
      tip: ''
    };
  },
  computed: {
    projectId() {
      return this.$store.state.currentProjectId;
    },
    viewToken() {
      return this.$route.query.id;
    },
    fileId() {
      return this.$route.query.fileId;
    }
  },
  mounted() {
    this.el = document.querySelector('.bimface-container .content');
    this.setModelConfig({
      viewToken: this.viewToken,
      fileId: this.fileId
    });
  },
  methods: {
    /**
     * 设置模型配置
     */
    setModelConfig(options) {
      const { viewToken, fileId } = options;
      this.tip = '';
      if (!viewToken || !fileId) {
        this.tip = '模型正在转换中...';
        return this.$message.warning('模型转换中');
      }
      this.setModel(options);
    },
    /**
     * 设置模型配置参数
     * @param options 参数
     */
    setModel(options = {}) {
      const bim = this.$refs.bim;
      bim && bim.destroyView && bim.destroyView();
      this.loaderOptions = options;
    },
    handleScreen(e) {
      this.fullScreen();
    },
    // 全屏
    fullScreen(ele) {
      const el = ele || this.el;
      if (!el) return;
      const isFullscreen = document.fullscreenElement ||
        document.mozFullscreenElement ||
        document.webkitFullscreenElement;
      if (!isFullscreen) {
        (el.requestFullscreen && el.requestFullscreen()) ||
        (el.mozRequestFullScreen && el.mozRequestFullScreen()) ||
        (el.webkitRequestFullscreen && el.webkitRequestFullscreen()) ||
        (el.msRequestFullscreen && el.msRequestFullscreen());
        return;
      }
      // 退出全屏
      document.exitFullscreen
        ? document.exitFullscreen()
        : document.mozCancelFullScreen
          ? document.mozCancelFullScreen()
          : document.webkitExitFullscreen
            ? document.webkitExitFullscreen()
            : '';
    }
  }
};
</script>

<style scoped lang="scss">
  @import '../../../assets/styles/main';

  .design-model-page {
    width: 100%;
    height: 100%;
    background: $baseBg;
    .btn {
      width: 100%;
      height: 50px;
      padding: 0 20px;
      display: flex;
      justify-content: flex-end;
      align-items: center;
    }
    main {
      width: 100%;
      height: calc(100% - 60px);
      background: $mainBg;
      border-radius: 10px;
      padding: 10px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .bimface-container {
        width: 100%;
        flex: 1;
        position: relative;
        overflow: hidden;
        .content {
          width: 100%;
          height: 100%;
          background: linear-gradient(0deg, #f6faff 10%, #d6e0eb 70%);
          .iframe {
            width: 100%;
            height: 100%;
          }
          .tip {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 31;
            font-size: 24px;
            color: $mainColor;
            position: absolute;
            top: 0;
            left: 0;
            pointer-events: none;
            background: linear-gradient(0deg, #f6faff 10%, #d6e0eb 70%);
          }
        }
      }
    }
  }
</style>
